<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />
    <title>我的简历</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background: #eee;
        margin: 20px 0;
      }

      article {
        width: 21cm;
        min-height: 29.7cm;
        background: white;
        margin: 0 auto;
        overflow: auto;
        padding: 1em;
      }
    </style>
    <style media="print">
      body {
        margin: 0;
      }

      .page2 {
        page-break-before: always;
        margin-top: 30px;
      }
    </style>
    <style>
      body {
      }

      p {
        margin: 0.3em 0;
      }

      h1 {
        font-size: 25px;
        margin-top: 0;
      }

      h4,
      h5,
      h6 {
        font-weight: normal;
      }

      ol,
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      strong {
        font-weight: normal;
        color: #f60;
      }

      a {
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid;
      }

      p,
      li {
        color: #666;
      }

      strong {
        font-weight: normal;
      }

      h3,
      h4,
      h5,
      h6 {
        margin: 0;
      }

      .bio {
        position: relative;
      }

      .bio img {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>

    <style>
      .projects {
      }

      .projects p {
        color: #666;
      }

      .projects strong {
        color: #f60;
      }

      .projects > ol {
        margin-top: 0;
        list-style-position: inside;
        padding: 0;
      }

      .projects > ol > li {
        margin-bottom: 24px;
      }

      .projects > ol > li > header {
        display: flex;
        justify-content: space-between;
      }

      .projects > ol > li h3 {
        display: inline-block;
      }
    </style>
    <style>
      .skills {
      }

      #skills {
        width: 500px;
        height: 270px;
      }
      @media print {
        #skills {
          display: none;
        }
      }

      .skills > .wrapper {
        display: flex;
        justify-content: space-between;
      }

      .skills > .wrapper > :first-child {
        margin-right: 24px;
      }

      .skills > .wrapper > #skills {
      }

      .skills > .wrapper > ul {
        color: #666;
      }

      .skills > .wrapper strong {
        color: #f60;
      }

      .skills > .wrapper > ul > li {
        line-height: 1.2;
        margin-bottom: 8px;
      }
    </style>
    <style>
      .openSource {
      }

      .openSource > h2 {
      }

      .openSource header img {
        position: absolute;
        top: 0;
        right: 0;
      }

      .openSource > ul {
      }

      .openSource > ul > li {
        margin-bottom: 24px;
      }

      .openSource header {
        position: relative;
        display: flex;
        justify-content: space-between;
      }

      .openSource h3 {
      }
    </style>
    <style>
      .jobs {
      }

      .jobs > h2 {
      }

      .jobs > ol {
      }

      .jobs > ol > li {
        margin: 12px 0;
      }

      .jobs header {
        display: flex;
        color: #666;
        margin-bottom: 12px;
      }

      .jobs header > h3 {
        font-size: 18px;
        color: #333;
      }

      .jobs header > h4 {
        margin-left: 1em;
        font-size: 18px;
      }

      .jobs header > span {
        font-size: 18px;
        margin-left: auto;
      }
    </style>

    <style>
      @media (max-width: 500px) {
        body {
          margin: 0;
        }

        article {
          width: auto;
          height: auto;
        }

        .bio img {
          display: none;
        }

        .skills .wrapper {
          flex-direction: column;
        }

        #skills {
          width: auto;
        }
        .jobs header {
          flex-direction: column;
        }
        .jobs header > h3,
        .jobs header > h4,
        .jobs header > span {
          margin: 0;
        }
      }
    </style>
  </head>

  <body>
    <article>
      <section class="bio">
        <h1>方应杭</h1>
        <img
          src="https://pic2.zhimg.com/v2-d206f673b1e7b8a7e3b31bc8041e05e2_xll.jpg"
          alt=""
          width="100"
          height="100"
        />
        <p>男 | 30岁 | 前端开发工程师 | 杭州</p>
        <p>手机：13812345678 | 微信：frank_fang | 邮箱：fangyinghang@foxmail.com</p>
      </section>

      <section class="projects">
        <h2>项目经历</h2>
        <ol>
          <li>
            <header>
              <h3>谷UI</h3>
              <span>
                <a href="#">源码链接</a>
                <a href="#">项目预览</a>
              </span>
            </header>
            <p>
              一款基于
              <strong>React</strong>
              /
              <strong>TypeScript</strong>
              /
              <strong>Webpack</strong>
              的 UI 框架。
            </p>
            <p>
              主要组件有日期选择器、弹出框、
              <strong>下拉更新</strong>
              、树形选择器等。
            </p>
            <p>已被公司前端同事广泛使用，有效提高前端团队的开发效率。</p>
            <p>
              制作过程让我对 TypeScript 和单元测试有了新的认识。 我将其总结成了一篇博客《TS
              泛型的使用》。
            </p>
          </li>
          <li>
            <header>
              <h3>写代码啦.com</h3>
              <span>
                <a href="#">源码私有</a>
                <a href="#">项目预览</a>
              </span>
            </header>
            <p>
              这是一个基于
              <strong>Rails</strong>
              和
              <strong>Vue</strong>
              的多页面应用。
            </p>
            <p>
              主要功能包括微信登录、手机验证、直播、点播、反盗版、答题系统、课程管理系统等。
              从数据库设计到前端展示，都是由我主导，另有两名前端辅助我。
            </p>
            <p>
              该系统
              <strong>大幅提高教学效率</strong>
              ，优化教学流程，受到公司和用户的好评。
            </p>
          </li>
          <li>
            <header>
              <h3>旺财记账</h3>
              <span>
                <a href="#">源码私有</a>
                <a href="#">项目预览</a>
              </span>
            </header>
            <p>
              一个基于
              <strong>React</strong>
              /
              <strong>TypeScript</strong>
              的移动端单页面应用。
            </p>

            <p>
              这是我从自己的需求出发，设计出的极简记账应用，特点是快速记账，
              而且可以通过图表查看自己的消费习惯。
            </p>
            <p>
              该项目大量使用
              <strong>React Hooks</strong>
              ，让我对 Hooks 有了深刻的理解和应用。
            </p>
          </li>
        </ol>
      </section>

      <section class="skills">
        <h2>技能</h2>
        <div class="wrapper">
          <div id="skills"></div>
          <ul>
            <li>
              熟悉页面制作技巧，能将设计稿
              <strong>完美还原</strong>
            </li>
            <li>
              熟悉
              <strong>前后端分离</strong>
              技术，包括 AJAX、跨域、前端路由、Cookie、Session 等
            </li>
            <li>
              熟练掌握
              <strong>Vue全家桶</strong>
              的使用，包括 VueCli、VueRouter、Vuex 等
            </li>
            <li>熟练掌握 React全家桶的使用，包括 create-react-app、ReactRouter、Redux 等</li>
            <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
            <li>
              了解
              <strong>TypeScript</strong>
              的使用，我的项目就是 TS 实现的
            </li>
            <li>
              了解
              <strong>Webpack 的配置和优化</strong>
            </li>
          </ul>
        </div>
      </section>

      <section class="openSource">
        <h2>开源项目</h2>
        <ul>
          <li>
            <header>
              <h3>自己写的 DOM 库</h3>
              <a href="#">源码链接</a>
            </header>
            <p>
              实现了元素选择、元素创建、
              <strong>事件委托</strong>
              、滑动手势等常见功能
            </p>
          </li>
          <li class="page2">
            <header>
              <h3>会动的哆啦A梦</h3>
              <span>
                <a href="#">源码链接</a>
                <a href="https://fangyinghang.com/make-a-pikachu/">项目预览</a>
              </span>
            </header>
            <p>
              这是我在学习
              <strong>CSS3和动画</strong>
              时制作的一个可爱作品
            </p>
          </li>
          <li>
            <header>
              <h3>简易画板</h3>
              <span>
                <a href="#">源码链接</a>
                <a href="#">项目预览</a>
              </span>
            </header>
            <p>
              我在学习
              <strong>Canvas</strong>
              时做的一个小作品
            </p>
          </li>
        </ul>
      </section>

      <section class="jobs">
        <h2>工作经历</h2>
        <ol>
          <li>
            <header>
              <h3>彩云工作室</h3>
              <h4>全栈开发工程师（Ruby+JS）</h4>
              <span>
                <time>2017年1月</time>
                ~
                <time>2018年1月</time>
              </span>
            </header>
            <ul>
              <li>
                独立负责 iPad 客户端的后台
                <strong>Rails</strong>
                开发和前端开发工作
              </li>
              <li>
                负责团队基础库开发、单元测试、文档撰写，确保测试
                <strong>覆盖率达到 90%</strong>
                以上
              </li>
              <li>作为前端骨干，负责给前端较弱的同事进行培训，提高其前端开发工作效率</li>
            </ul>
          </li>
          <li>
            <header>
              <h3>哦外巴巴集团杭州总部</h3>
              <h4>开发工程师</h4>
              <span>
                <time>2015年1月</time>
                ~
                <time>2017年1月</time>
              </span>
            </header>
            <ul>
              <li>独立负责某 CRM 系统的开发与维护（后端使用Groovy，前端使用JS）</li>
              <li>
                负责全部门
                <strong>UI 框架的开发</strong>
                ，包括对话框、
                <strong>树形组件</strong>
                、
                <strong>日期选择器</strong>
                等常用组件
              </li>
              <li>
                定期组织内部分享，包括 Git 的使用、
                <strong>ES6 新特性</strong>
                、TypeScript 等话题
              </li>
            </ul>
          </li>
        </ol>
      </section>

      <section class="others">
        <h2>其他链接</h2>
        <ul>
          <li>
            <a href="https://www.zhihu.com/people/zhihusucks/posts/posts_by_votes">我的博客</a>
            ，目前已有 21 篇技术文章
          </li>
          <li>
            <a href="https://github.com/frankfang">我的 GitHub</a>
            ，过去三个月有 200 次提交
          </li>
        </ul>
      </section>

      <section class="education">
        <h2>教育经历</h2>
        <p>
          <span>
            <time>2008年</time>
            ~
            <time>2012年</time>
          </span>
          关山口职业技术学校 软件学院 本科
        </p>
      </section>
    </article>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
